// Copyright 2025 The LUCI Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { useMemo } from 'react';

import { COMMON_DEVICE_FILTERS } from '@/fleet/config/device_config';
import { OptionCategory, SelectedOptions } from '@/fleet/types';

import { FilterBarOld } from '../filter_dropdown/filter_bar_old';

import { DeviceSearchBar } from './device_search_bar';

export function DeviceListFilterBarOld({
  filterOptions,
  selectedOptions,
  onSelectedOptionsChange,
  isLoading,
}: {
  filterOptions: OptionCategory[];
  selectedOptions: SelectedOptions;
  onSelectedOptionsChange: (newSelectedOptions: SelectedOptions) => void;
  isLoading?: boolean;
}) {
  const deviceIds = useMemo(() => {
    const deviceIdCategory = filterOptions.find((opt) => opt.value === 'id');
    return deviceIdCategory === undefined ? [] : deviceIdCategory.options;
  }, [filterOptions]);

  return (
    <div css={{ display: 'flex', gap: 8 }}>
      <DeviceSearchBar
        options={deviceIds}
        applySelectedOption={(optionId) =>
          onSelectedOptionsChange({ id: [optionId] })
        }
      />
      <FilterBarOld
        filterOptions={filterOptions}
        selectedOptions={selectedOptions}
        onSelectedOptionsChange={onSelectedOptionsChange}
        isLoading={isLoading}
        commonOptions={COMMON_DEVICE_FILTERS}
      />
    </div>
  );
}
